<template>
  <div class="mod-config">
      <div class="boxsty">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">测评统计（评议）</div>
        </div>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
          <el-form-item label="汇总名称">
            <el-input v-model="dataForm.hdName" style="width:300px" placeholder="请输入汇总名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
          </el-form-item>
        </el-form>
        <div class="avue-crud make_zk" style="height:60vh">
          <el-table :data="dataList" v-loading="dataListLoading" :row-key="getRowKeys" stripe tooltip-effect="light" @expand-change="changeline" :expand-row-keys="expands" @row-click="rowClick">
            <el-table-column type="index" width="80" label="序号">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="hdName" min-width="200" label="汇总名称"> </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-row>
                      <el-col :span="24" v-for="(item,index) in props.row.tableData" class="active">
                        <div class="folding">
                          <template>
                            <el-button type="text" :class="item.sheetType ==3||item.sheetType ==4||item.sheetType == 5 ? 'numTips' : 'noActive' " :disabled="item.sheetType ==3||item.sheetType ==4||item.sheetType == 5 ? false : true"  @click="statisticalBtn(props.row.id,item)">{{index+1}}--{{item.cppName}}</el-button>
                          </template>
                        </div>
                      </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" min-width="120" label="建立时间">
              <template slot-scope="scope">
                {{$moment(scope.row.createTime).format("YYYY-MM-DD")}}
              </template>
            </el-table-column>
            <el-table-column prop="createUserName" label="建立人员">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="small">统计</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <summary3 :summary3Data="summary3Data"></summary3>
      <summary4 :summary4Data="summary4Data"></summary4>
      <summary5 :summary5Data="summary5Data"></summary5>
  </div>
</template>

<script>
/*!
 * 绩效考核-测评统计列表
 *
 * @author zmk
 * @date 2021-07-08 09:30:00
 */
import { fetchList2, cppPage } from '@/api/ceping/cepinghzglb'
import summary3 from './summary3'
import summary5 from './summary5'
import summary4 from './summary4'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      expands:[],
      dataForm: {
        hzName: ''
      },
      isActive:true,
      noActive:true,
      summary5Data:{},
      summary3Data:{},
      summary4Data:{},
      dataList: [],
      ticketList:[],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    }
  },
  components: {
    summary3,
    summary5,
    summary4
  },
  created() {
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions']),
    classObj(sheetType){
      if(sheetType==3 || sheetType == 4 || sheetType ==5){
        return{
          numTips:this.isActive,
        }
      }else{
        return{
          noActive:this.noActive,
        }
      }
    }
  },
  methods: {
    rowClick(row,event,column){
      this.expands = []; 
      this.expands.push(row.id); 
      this.changeline(row,column)
    },
     getRowKeys(row) {undefined
            return row.id;
        },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList2(Object.assign({
        current: this.pageIndex,
        size: this.pageSize,
        hdZt:"已结束",
        hdSh:"已审核",
      }, this.dataForm)).then(response => {
        response.data.data.records.map(item=>{
          item.tableData=[];
        })
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
      })
      this.dataListLoading = false
    },
    changeline(row, expandedRows) {
      this.dataListLoading = true;
      cppPage({hdId:row.id}).then((response)=>{
        this.dataListLoading = false;
        row.tableData = response.data.data.records;
      })
    },
    // 统计
    // ticketId  票 item.id
    // activityId 活动id
    statisticalBtn(ticketId,item){
     //console.log(item);
     //console.log(ticketId)
      // 票3
      if(item.sheetType == 3){
        this.summary3Data={
          visible:true,
          hdId:ticketId,
          cppId:item.cppId,
        }
        // 票5
      }else if(item.sheetType == 5){
        this.summary5Data={
          visible:true,
          hdId:ticketId,
          cppId:item.cppId,
          cppName:item.cppName
        }
         // 票4
      }else if(item.sheetType == 4){
        this.summary4Data={
          visible:true,
          hdId:ticketId,
          cppId:item.cppId,
        }
      }
      
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
  }
}
</script>
<style>
.folding{
  display: flex;
  justify-content: space-between;
  padding-right:30px;
  margin: 4px 0;
}
.numTips {
    line-height: 25px;
    height: 25px;
    width: auto;
    padding: 0 10px;
    text-align: center;
    background: #0d258d;
    color: #fff;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 14px;
}
.noActive{
   line-height: 25px;
    height: 25px;
    width: auto;
    padding: 0 10px;
    text-align: center;
    background: #c8c9cc;
    color: #fff;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 14px;
}
.make_zk .el-table tr td .el-table__expand-icon{
 display: none;
}
.active{
  background: #eff2fa;
  border: 3px solid #fff;
}
</style>
